<template>
  <div class="detail">
    <van-nav-bar title="商品补货详情" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <van-form @submit="onSubmit" :show-error="true" validate-trigger="submit">
      <div class="content">
        <van-field
          v-model="inputValue.buyspec.value"
          name="buyspec"
          label="进货件数"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入进货件数"
          :rules="[{ required: true}]"
        />
        <van-field
          v-model="inputValue.buynum.value"
          name="buynum"
          label="进货数量"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入进货数量"
          :rules="[{ required: true}]"
        />
      </div>
      <div class="content">
        <van-field
          v-model="inputValue.buyprice.value"
          name="buyprice"
          label="进价"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入商品进价"
          :rules="[{ required: true}]"
        />
        <van-field
          v-model="inputValue.taxrate.value"
          name="taxrate"
          label="皮重"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入皮重"
          :rules="[{ required: true}]"
        />
      </div>
      <div class="content">
        <van-field
          v-model="inputValue.retailprice.value"
          name="retailprice"
          label="零售价"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入零售价"
          :rules="[{ required: true}]"
        />
        <van-field
          v-model="inputValue.kzprice.value"
          name="kzprice"
          label="框子单价"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入框子单价"
          :rules="[{ required: true}]"
        />
      </div>
      <div class="content">
        <van-field
          v-model="inputValue.admprice.value"
          name="admprice"
          label="配送价"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入配送价"
          :rules="[{ required: true}]"
        />
        <van-field
          v-model="inputValue.buymoney.value"
          name="buymoney"
          label="采购金额"
          clearable
          readonly
          @touchstart.native.stop="touchstart($event.target.name,$event.target)"
          placeholder="请输入采购金额"
          :rules="[{ required: true}]"
        />
      </div>
      <van-field
        clickable
        name="bpyn"
        v-model="bpyn"
        readonly
        label="是否标品"
        placeholder="点击选择是否标品"
        :rules="[{ required: true}]"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">确定</van-button>
      </div>
      <van-number-keyboard
        v-model="inputValue[type].value"
        :show="inputValue[type].show"
        :title="inputValue[type].value"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @blur="inputValue[type].show=false"
      />
    </van-form>
    <van-loading v-if="$store.state.showLoading" vertical size="48px" color="#1989fa" type="spinner">正在上传</van-loading>
  </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component} from "vue-property-decorator";
  import {axios} from "@/helper/axios";
  import {Details, InputValue, Items, Res} from "@/type/type";
  import {Toast} from "vant";
  import setItem from "@/helper/setItem";
  import getItem from "@/helper/getItem";
  import dayjs from "dayjs";

  @Component
  export default class Detail extends Vue {
    columns = ["是", "否"];
    showPicker = false;
    type = "buyprice";
    inputValue = {
      buyspec: {value: "", show: false},//进货件数 输入
      buynum: {value: "", show: false},//进货数量 输入
      buymoney: {value: "", show: false},//进货金额 输入
      taxrate: {value: "", show: false},//皮重 输入
      buyprice: {value: "", show: false},//进价 输入
      admprice: {value: "", show: false},//配送价 输入
      retailprice: {value: "", show: false},//零售价 输入
      kzprice: {value: "", show: false}//框子单价 输入
    };
    pbillno = "";//编号 传递
    goodscode = "";//编码 传递
    asknum = ""; //要货数量 传递
    stocknum = ""; //当前库存 传递
    spec1 = ""; //库存件数  传递
    lastbuyprice = ""; //最新进价 传递
    barcode = "";
    goodsname = "";
    pack = "";
    retailprice = "";
    spec = "";
    bpyn = ""; //是否标品 输入 0否1是

    created() {
      const {pbillno, goodscode, asknum, stocknum, lastbuyprice, retailprice, pack, barcode, goodsname, spec} = this.$route.query as Items;
      this.pbillno = pbillno;
      this.goodscode = goodscode;
      this.asknum = asknum;
      this.stocknum = stocknum;
      this.lastbuyprice = lastbuyprice;
      this.spec1 = pack;
      this.barcode = barcode;
      this.goodsname = goodsname;
      this.retailprice = retailprice;
      this.spec = spec;
      this.pack = pack;
      const local = getItem("supplyInput");
      if (local) {
        const parse: Details[] = JSON.parse(local);
        const current = parse.find((i: Details) => i.itemValue.barcode === this.barcode);
        if (current) {
          const {buyspec, buynum, buymoney, taxrate, buyprice, admprice, retailprice, kzprice, bpyn} = current.inputValue;
          this.inputValue.buyspec.value = buyspec;
          this.inputValue.buynum.value = buynum;
          this.inputValue.buymoney.value = buymoney;
          this.inputValue.taxrate.value = taxrate;
          this.inputValue.buyprice.value = buyprice;
          this.inputValue.admprice.value = admprice;
          this.inputValue.retailprice.value = retailprice;
          this.inputValue.kzprice.value = kzprice;
          this.bpyn = bpyn === "1" ? "是" : "否";
        }
      }
    }

    onConfirm(res: string) {
      this.bpyn = res;
      this.showPicker = false;
    }

    touchstart(res: Res, el: HTMLElement) {
      if (el.tagName.toLowerCase() === "input") {
        this.type = res;
        this.inputValue[res].show = true;
      }
    }

    onSubmit(res: InputValue) {
      this.$store.commit("showLoading", true);
      const {spec1, pbillno, goodscode, asknum, stocknum, lastbuyprice, retailprice, pack, barcode, goodsname, spec} = this;
      const bpyn = this.bpyn === "是" ? "1" : "0";
      const inputValue = {...res, bpyn};
      const itemValue = {
        pbillno,
        goodscode,
        asknum,
        stocknum,
        lastbuyprice,
        retailprice,
        pack,
        barcode,
        goodsname,
        spec,
        createdate: dayjs(new Date()).format("YYYY-MM-DD")
      };
      const data = {pbillno, goodscode, asknum, stocknum, lastbuyprice, spec1, ...inputValue,};
      axios(data, "sx/order/bz").then(() => {
        const local = getItem("supplyInput");
        if (local) {
          const parse: Details[] = JSON.parse(local);
          const index = parse.findIndex((i: Details) => i.itemValue.barcode === this.barcode);
          if (index >= 0) {
            parse.splice(index, 1);
          }
          setItem("supplyInput", JSON.stringify([{itemValue, inputValue}, ...parse]));
        } else {
          setItem("supplyInput", JSON.stringify([{itemValue, inputValue}]));
        }
        Toast.success({message: "上传成功", duration: 1000});
        setTimeout(() => {
          this.$router.push("/item");
        }, 1200);
      });
    }

    onClickLeft() {
      this.$router.push("/item");
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/style/detail";
</style>